<template>
  <div>
      <h2>欢迎来到商品信息管理页面！</h2>
      <!--导航条-->
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">关于我们</a></el-menu-item>
        </el-menu>
        <br>
        <!--搜索框-->
        <el-row>
            <el-col :span="3" class="grid">
                <el-input v-model="intxt" placeholder="请输入内容" size="mini"></el-input>
            </el-col>
            <el-col :span="1" class="grid">
                <el-button type="success" icon="el-icon-search" size="mini" @click="query()">搜索</el-button>
            </el-col>
        </el-row>
        <br>
        <!--表格数据及操作-->
        <el-table :data="goodses.slice((page.pageNum-1)*page.pageSize,(page.pageNum*page.pageSize-1))" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
            <!--索引-->
            <el-table-column type="index" label="序号">
                <template slot-scope="scope">
                    {{(page.pageNum-1)*page.pageSize+scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column prop="id" label="商品编号" width="180" sortable>
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="180">
            </el-table-column>
            <el-table-column prop="count" label="商品库存" width="180">
            </el-table-column>
            <el-table-column label="编辑" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.$index)">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除" width="100">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--新增按钮-->
        <el-col :span="1" class="grid">
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" round @click="add()">新增</el-button>
        </el-col>        
        <br>
        <!--分页条-->
        <el-pagination background layout="prev, pager, next" :total="page.totalRecords" 
        :page-size="page.pageSize"  @current-change="currentChange">
        </el-pagination>

        <!-- 新增商品信息模态框 -->
        <el-dialog title="新增商品" :visible="addGoodsForm"  :modal-append-to-body='false' @close='closeDialog'>
        <el-form id="#addgForm" ref="addgForm" :model="addgForm" label-width="80px">
            <el-form-item label="商品编号" prop="id">
            <el-input  v-model="addgForm.id" max-length="10"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
            <el-input v-model="addgForm.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
            <el-input v-model="addgForm.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="count">
            <el-input v-model="addgForm.count"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="goodsAdd()">确定</el-button>
            <el-button @click="addGoodsForm = false;">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>


        <!-- 编辑商品信息模态框 -->
        <el-dialog title="修改商品信息" :visible="editGoodsForm"  :modal-append-to-body='false' @close='closeDialog'>
        <el-form id="#editgForm" ref="editgForm" :model="editgForm" label-width="80px">
            <el-form-item label="商品编号" prop="id">
            <el-input  v-model="editgForm.id" max-length="10"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
            <el-input v-model="editgForm.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
            <el-input v-model="editgForm.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="count">
            <el-input v-model="editgForm.count"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="goodsEdit()">确定</el-button>
            <el-button @click="editGoodsForm = false;">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>

       



  </div>
</template>

<script>
export default {
    name:'GoodsManger',
    data() {
            return {
                //表格数据
                goodses: [{
                    id: '0001',
                    name: '苹果8',
                    price: '2888',
                    count:10
                },{
                    id: '0002',
                    name: '苹果9',
                    price: '3888',
                    count:20
                },{
                    id: '0003',
                    name: '苹果10',
                    price: '4888',
                    count:30
                },{
                    id: '0004',
                    name: '苹果11',
                    price: '5888',
                    count:40
                },
                {
                    id: '0005',
                    name: '小米8',
                    price: '2888',
                    count:10
                },{
                    id: '0006',
                    name: '小米9',
                    price: '2888',
                    count:10
                },
                {
                    id: '0001',
                    name: '苹果8',
                    price: '2888',
                    count:10
                },{
                    id: '0002',
                    name: '苹果9',
                    price: '3888',
                    count:20
                },{
                    id: '0003',
                    name: '苹果10',
                    price: '4888',
                    count:30
                },{
                    id: '0004',
                    name: '苹果11',
                    price: '5888',
                    count:40
                },
                {
                    id: '0005',
                    name: '小米8',
                    price: '2888',
                    count:10
                },{
                    id: '0006',
                    name: '小米9',
                    price: '2888',
                    count:10
                },
                {
                    id: '0001',
                    name: '苹果8',
                    price: '2888',
                    count:10
                },{
                    id: '0002',
                    name: '苹果9',
                    price: '3888',
                    count:20
                },{
                    id: '0003',
                    name: '苹果10',
                    price: '4888',
                    count:30
                },{
                    id: '0004',
                    name: '苹果11',
                    price: '5888',
                    count:40
                },
                {
                    id: '0005',
                    name: '小米8',
                    price: '2888',
                    count:10
                },{
                    id: '0006',
                    name: '小米9',
                    price: '2888',
                    count:10
                }],
                //新增商品暂时存放在这里
                addgForm:{
                id:'',
                name:'',
                price:"",
                count:''
                },
                //修改的商品信息暂时存放在这里
                editgForm:{
                id:'',
                name:'',
                price:"",
                count:''
                },
                addGoodsForm:false,//当为真时，增加商品窗口显示
                editGoodsForm:false,//当为真时，商品信息修改窗口显示
                editIndex:0,
                //查询输入框数据
                intxt: '',
                //导航条默认选项
                activeIndex: '1',
                activeIndex2: '1',
                page: {
                    pageSize: 10, //每页条数,  默认10条
                    totalRecords: 0, //总条数
                    totalPages: 0, //总页数
                    pageNum:1
                },
            }
        },
        mounted(){
            this.page.totalRecords=this.goodses.length;
            this.page.totalPages=this.page.totalRecords/this.page.pageSize+1;
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            query(){
                // axios.get(url,{query:this.intxt})
                // .then(res=>{
                //         if(res.text.success==='成功'){
                //             this.goodses=res.text.data;                        
                //     }else{
                //         this.$message.error("查询失败");
                //     }
                // })
            },
            indexMethod(index) {
                return index;
            },
            add(){//新增按钮
                this.addGoodsForm=true;
            },
            goodsAdd:function(){//该方法做的工作：发起后端访问，请求后端往数据库中添加记录，如果成功，则记录添加data中goodses数组中，添加窗口隐藏，如果失败，则弹出对话框，添加失败
                //检查用户输入的数据是否合格
                // axios.post(url,{'goods':this.addgForm})
                // .then(res=>{
                //     //后端服务器访问成功含义是表示后端返回的响应消息状态码是200，并不一定表示增加到数据库中成功
                //     if(res.text.success==='成功'){
                //         this.goodses.push(this.addgForm)  
                //         this.addGoodsForm=false;
                //     }else{
                //         this.$message.error("添加失败");
                //     }
                // })
                // .catch(erros=>{})  
                // 如果后端返回成功，则做下面工作
                this.goodses.push(this.addgForm)  
                this.addGoodsForm=false;
                // 如果后端返回失败，则做下面工作，弹出对话框
                // this.$message.error("添加失败");
            },
            closeDialog(){
                this.addGoodsForm=false;
                this.editGoodsForm=false;
            } ,
            edit(row){
                let index=(this.page.pageNum-1)*this.page.pageSize+row
                console.log(row,index,this.page.pageNum,this.page.pageSize)
                this.editIndex=index;
                this.editgForm=this.goodses[index];//单击编辑按钮，把数组中对应元素的值提取赋值给临时变量，用来绑定编辑修改窗口
                this.editGoodsForm=true;
            } ,
            goodsEdit(){//点击编辑窗口的确定按钮执行这里请求后端往数据库中修改记录，如果成功，则修改data中goodses数组中对应元素，编辑窗口隐藏，如果失败，则弹出对话框，编辑失败
                //检查用户输入的数据是否合格
                // axios.post(url,{'goods':this.editgForm})
                // .then(res=>{
                //     //后端服务器访问成功含义是表示后端返回的响应消息状态码是200，并不一定表示增加到数据库中成功
                //     if(res.text.success==='成功'){
                //         this.goodses[this.editIndex]=this.editgForm
                //         this.editGoodsForm=false;
                //     }else{
                //         this.$message.error("添加失败");
                //     }
                // })
                // .catch(erros=>{})  
                // 如果后端返回成功，则做下面工作
                this.goodses[this.editIndex]=this.editgForm
                this.editGoodsForm=false;
                // 如果后端返回失败，则做下面工作，弹出对话框
                // this.$message.error("添加失败");

            },
            del(row){
                let index=(this.page.pageNum-1)*this.page.pageSize+row
                this.$confirm('此操作将永久删除商品 ' +this.goodses[index].name+ ', 是否继续?', '提示', { type: 'warning' })
                .then(()=>{//点击确定删除执行这里
                    //向后端发起请求，后端在数据库中删除该记录，如果成功，这里要在data中goodses数组删除元素，如果失败给提示
                //     axios.post(url,{'goods':this.goodses.splice(index,1) })
                //     .then(res=>{
                //     //后端服务器访问成功含义是表示后端返回的响应消息状态码是200，并不一定表示增加到数据库中成功
                //     if(res.text.success==='成功'){
                //         this.goodses.splice(index,1)    
                //         this.$message.info("删除成功！")      
                //     }else{
                //         his.$message.info('服务器反馈删除失败!');
                //     }
                // })
                // .catch(erros=>{})  
                // 如果后端返回成功，则做下面工作  
                this.goodses.splice(index,1)    
                this.$message.info("删除成功！")              
                })
                .catch(()=>{
                    this.$message.info('已取消操作!');
                })//点击取消删除执行这里

            },
            delSelect(){                

            },
            // // 每页显示多少条数据
            // sizeChange(val) {
            //     this.page.pageSize = val;
            // },
            //翻页
            currentChange(val) {
                this.page.pageNum=val;
            },
        }
}
</script>

<style>

</style>